<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
    <style>
      .listText {
        border: none;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>日常工作列表</h2>
      <div>
        <input type="text" v-model="workList" @keyup.enter="addList" />
        <button @click="addList">添加</button>
      </div>
      <div>
        <input type="text" v-model="searchList" />
        <button @click="search" @keyup.enter="search">搜索</button>
      </div>

      <ul>
        <li v-for="(list,index) in newList">
          序号{{ index+1 }}：
          <input
            type="text"
            class="listText"
            v-model="list.name"
            v-bind:readonly="list.isReadOnly"
            @blur="onBlur(index)"
            @click="change(index,$event)"
          />
          <button @click="delList(index)">删除</button>
        </li>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          workList: "",
          listArr: [],
          searchList: "",
          newList: [],
        },
        methods: {
          addList() {
            this.newList.push({
              name: this.workList,
              isReadOnly: true,
            });
            this.listArr = this.newList.map((item)=> item);
            this.workList = "";
          },
          delList(index) {
            let local = this.listArr.indexOf(...this.newList.slice(index, index + 1));
            this.newList.splice(index, 1);
            this.listArr.splice(local, 1);
          },
          change(index) {
            this.newList[index].isReadOnly = false;
            this.listArr = this.newList.map((item)=> item);
          },
          onBlur(index) {
            this.newList[index].isReadOnly = true;
            this.listArr = this.newList.map((item)=> item);
          },
          search() {
            if (this.searchList) {
              console.log(this.searchList);
              this.newList = this.listArr.filter((item) => {
                if (item.name.match(this.searchList)) {
                  return item;
                }
              });
            } else {
              this.newList = this.listArr.map((item)=> item);
              console.log(this.newList);
            }
          },
        },
      });
    </script>
  </body>
</html>
